<template>
  <view
    class="tn-tag"
    :class="[tagClass]"
    :style="tagStyle"
    :hover-class="hoverClass"
    @tap.stop="handleClick"
  >
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
import { tagProps, tagEmits } from '../../../types/tn-tag'
import { ColorInfo } from '../../../types/tuniao-ui'
import { computed, watchEffect, CSSProperties } from 'vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'

const props = defineProps(tagProps)
const emits = defineEmits(tagEmits)

const { generateColorInfo, splitColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
// 监听颜色变化实时修改颜色对应的属性
watchEffect(() => {
  componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
})

// 解析边框颜色
const borderColor = computed<ColorInfo>(() => {
  return splitColorInfo('border', props?.borderColor || '')
})
// 解析阴影颜色
const shadowColor = computed<ColorInfo>(() => {
  return splitColorInfo('shadow', props?.shadowColor || '')
})

// tag标签样式
const tagStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (props?.width) {
    style.width = handleValueWithUnit(props.width)
  }
  if (props?.height) {
    style.height = handleValueWithUnit(props.height)
  }

  if (props?.fontSize) {
    style.fontSize = handleValueWithUnit(props.fontSize)
  }
  if (componentColorInfo.style?.color) {
    style.color = componentColorInfo.style.color
  }

  // 如果不是镂空才进行背景颜色的设置
  if (!props?.plain && componentColorInfo.style?.backgroundColor) {
    style.backgroundColor = componentColorInfo.style.backgroundColor
  }
  if (props?.plain && borderColor.value.type === 'style') {
    style.borderColor = borderColor.value.value
  }
  if (props?.shadow && shadowColor.value.type === 'style') {
    style.boxShadow = `6rpx 6rpx 8rpx ${shadowColor.value.value}`
  }


  return Object.assign(style, props.customStyle || {})
})

// tag标签对应类
const tagClass = computed<string>(() => {
  let clazz: string[] = []
  if (componentColorInfo.class.length > 0) {
    clazz.push(...componentColorInfo.class)
  }
  if (props?.fontBold) {
    clazz.push('tn-text-bold')
  }

  // 设置默认size
  if (props?.size) {
    clazz.push(`tn-tag--${props.size}`)
  }
  // 设置默认type
  if (props?.type) {
    clazz.push(`tn-type-${props.type}`)
  }
  // 设置形状
  if (props?.shape) {
    clazz.push(`tn-tag--${props.shape}`)
  }
  // 设置阴影
  if (props?.shadow) {
    clazz.push('tn-shadow')
    if (shadowColor.value.type === 'class') {
      clazz.push(shadowColor.value.value)
    }
  }
  // 设置镂空状态
  if (props?.plain) {
    clazz.push('tn-tag--plain')
    if (props?.border) {
      clazz.push('tn-border')
      if (props?.borderBold) {
        clazz.push('tn-border-bold')
      }
      if (borderColor.value.type === 'class') {
        clazz.push(borderColor.value.value)
      }
    }
  }

  return clazz.join(' ')
})

// 处理点击事件
const handleClick = () => {
  emits('click', props.index)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-tag {
  position: relative;
  background-color: $tn-main-color;
  color: #FFFFFF;
  padding: 6rpx 12rpx;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  &--plain {
    background-color: transparent !important;
    background-image: none;
    color: $tn-font-color;
  }

  /* 内置尺寸 start */
  &--sm {
    font-size: 20rpx;
  }
  &--lg {
    font-size: 36rpx;
    padding: 6rpx 12rpx;
    &.tn-tag--elliptic {
      padding: 8rpx 18rpx;
    }
  }
  &--xl {
    font-size: 44rpx;
    padding: 6rpx 12rpx;
    &.tn-tag--elliptic {
      padding: 10rpx 20rpx;
    }
  }
  /* 内置尺寸 end */

  /* 内置形状 start */
  &--round {
    border-radius: 8rpx;
  }
  &--elliptic {
    border-radius: 1000rpx;
    padding: 4rpx 16rpx;
  }
  &--leftCircle {
    border-radius: 1000rpx 0rpx 0rpx 1000rpx;
  }
  &--rightCircle {
    border-radius: 0rpx 1000rpx 1000rpx 0rpx;
  }
  /* 内置形状 end */
}
</style>
